<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="分桶项目">
      <el-input v-model="form.title" style="width: 60%;"/>
    </el-form-item>
    <el-form-item label="提升目标">
      <el-col :span="8">
        <el-cascader :options="form.options2" placeholder="目标选择" filterable change-on-select separator="→" style="width: 100%;"/>
      </el-col>
      <el-col :span="4" style="margin-left: 20px;">
        <el-checkbox>只在页面范围内</el-checkbox>
      </el-col>
    </el-form-item>
    <el-form-item label="客户端选择">
      <el-col :span="4">
        <el-cascader :options="form.region" placeholder="选择客户端" filterable change-on-select separator="-"/>
      </el-col>
      <el-col :span="1" class="line">-</el-col>
      <el-col :span="4">
        <el-select v-model="form.version1" placeholder="选择版本号">
          <el-option v-for="item in form.version" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-col>
      <el-col :span="1" class="line">-</el-col>
      <el-col :span="4">
        <el-select v-model="form.version2" placeholder="选择版本号">
          <el-option v-for="item in form.version" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item label="测试周期">
      <el-col :span="4">
        <el-date-picker v-model="form.date1" type="datetime" placeholder="Pick a date" style="width: 100%;"/>
      </el-col>
      <el-col :span="1" class="line">-</el-col>
      <el-col :span="4">
        <el-date-picker v-model="form.date2" type="datetime" placeholder="Pick a date" style="width: 100%;"/>
      </el-col>
    </el-form-item>
    <el-form-item label="测试对象">
      <div v-for="item in form.add" :key="item.index"><el-col :span="7"><project-form-bucket/></el-col></div>
      <el-col :span="3"><el-button type="primary" size="small" @click="dyncMount">添加对照组</el-button></el-col>
    </el-form-item>
    <el-form-item label="项目成员">
      <el-drag-select v-model="form.name1" style="width:500px;" multiple placeholder="请选择">
        <el-option v-for="item in form.users" :label="item.label" :value="item.value" :key="item.value" />
      </el-drag-select>
    </el-form-item>
    <el-form-item label="关注人员">
      <el-drag-select v-model="form.name2" style="width:500px;" multiple placeholder="请选择">
        <el-option v-for="item in form.users" :label="item.label" :value="item.value" :key="item.value" />
      </el-drag-select>
    </el-form-item>
    <el-form-item label="发送报表邮件">
      <el-switch v-model="form.delivery"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>保存草稿</el-button>
      <el-button>清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import ElDragSelect from '@/components/DragSelect'
import ProjectFormBucket from './project_form_bucket.vue'
export default {
  components: { ElDragSelect, ProjectFormBucket },
  props: { addproject: { type: Boolean, default: true }},
  data() {
    return {
      addform: this.addproject,
      form: {
        add: [],
        title: '',
        version: [],
        version1: '',
        version2: '',
        date1: '',
        date2: '',
        delivery: true,
        type: [],
        name1: [],
        name2: [],
        users: [],
        region: [],
        options2: []
      }
    }
  },
  methods: {
    delThis() {
      this.moduleShow = false
    },
    onSubmit() {
      this.$emit('addform', Boolean)
      this.$message({
        message: '提交成功!',
        type: 'success'
      })
    },
    onCancel(form) {
      this.$message({
        message: '取消编辑!',
        type: 'warning'
      })
    },
    dyncMount() {
      this.form.add.push('')
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
